<!-- 用户关注按钮 -->
<template>
    <van-button
    v-if="isFollow"
    round
    type="primary"
    @click="onFllow"
    class="follow-button"
    :loading='loading'
    >已关注</van-button>
    <van-button
    v-else
    round
    type="primary"
    @click="onFllow"
    :loading='loading'
    >+ 关注</van-button>
</template>

<script>
import { userFollow, userNotFollow } from '@/api/user'
export default {
  name: 'UserFollow',
  props: {
    userId: {
      type: [Number, String, Object],
      required: true
    },
    isFollow: {
      type: Boolean,
      required: true
    }
  },
  data () {
    return {
      loading: false // 控制点击按钮加载动画
    }
  },
  methods: {
    // 点击关注按钮
    async onFllow () {
      this.loading = true // 点击按钮显示加载动画
      try {
        if (this.isFollow) {
          // 用户关注了执行这里,点击就取消关注
          await userNotFollow(this.userId)
          // this.articleDetail.is_followed = false
        } else {
          // 用户没有关注执行这里,点击就关注
          await userFollow({ target: this.userId })
          // this.articleDetail.is_followed = true
        }
        this.$emit('updata-is-followed')
      } catch (error) {
        console.log(error)
      }
      this.loading = false // 取消显示加载动画
    }
  }
}
</script>

<style  scoped>

</style>
